<template>
    <div>
        
        <div class="layout">
            <div class="top">
                <div class="contanier">
                    <div class="t-left">后台内容管理系统</div>
                    <div class="t-right">
                        <div class="link" v-if="!isLogin">
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <router-link to="/login">
                                <p>登录</p>
                            </router-link>
                        </div>
                        <div class="user" v-else>
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <router-link to="/admin">
                                <p>管理员</p>
                            </router-link>
                            <button @click="logout">退出</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="b-left">
                    <Navigation></Navigation>
                </div>
                <div class="b-right">
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="提示" width="500">
            <span>你确定要退出登录吗?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureFn">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import Navigation from './components/Navigation.vue'
import { useRouter } from 'vue-router'
import { ref } from "vue"
const router = useRouter()
const token = localStorage.getItem("TOKEN")
// const nickName = ref("")
const isLogin = ref(false)
const dialogVisible = ref(false)
if (token) {
    isLogin.value = true
    // nickName.value = localStorage.getItem("NICKNAME")
}
const logout = () => {
    // ElMessageBox.confirm('你确定要退出登录吗?')
    //     .then(() => {
    //         localStorage.removeItem("TOKEN")
    //         router.replace({ path: '/login' })
    //     })
    dialogVisible.value = true
}
const sureFn = () => {
    localStorage.removeItem("TOKEN")
    // localStorage.removeItem("NICKNAME")
    dialogVisible.value = false
    router.replace({ path: '/login' })
}
</script>



<style scoped lang="scss">
@import './common/scss/variable.scss'; 
.layout {
    width: 100%;
    height: 100%;
    margin: 0;
    min-width: 1200px;

    .top {
        width: 100%;
        height: 80px;
        background-color: $bgColor;

        .contanier {
            width: 90%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;

            .t-left {
                height: 100%;
                line-height: 80px;
                font-size: 30px;
            }

            .t-right {
                >div {
                    height: 100%;
                    font-size: 20px;
                    width: 200px;
                    /* justify-content: space-between; */
                    display: flex;
                    align-items: center;

                    button {
                        margin-left: 10px;
                        border: 0;
                        border-radius: 10px;
                        font-size: 14px;
                        /* padding: 5px 8px; */
                        background-color: transparent;
                    }
                }
                .link{
                    width: 60px;
                }
            }
        }
    }

    .bottom {
        height: 649px;
        width: 100%;
        // background-color: aquamarine;
        display: flex;

        .b-left {
            width: 200px;
            height: 100%;
            // background-color: #ffffff;
        }

        .b-right {
            width: calc(100% - 200px);
            height: 100%;
            // background-color: #ccc;
        }
    }
}
</style>